//  轮播图
let btn = document.querySelectorAll(".btns p");
let boxAll = document.querySelectorAll(".box div");
let leFt = document.querySelector("#leFt");
let rigHt = document.querySelector("#rigHt");
let big = document.querySelector(".big");
let pageNum = 0;
btn.forEach((v, i) => {
  v.onclick = () => {
    btn[pageNum].style.backgroundColor = "";
    v.style.backgroundColor = "#fc5600";
    boxAll[pageNum].style.opacity = 0;
    boxAll[i].style.opacity = 1;
    // 更新页码
    pageNum = i;
  };
});
//  定时器
let timer = setInterval(function () {
  btn[pageNum].style.backgroundColor = "";
  boxAll[pageNum].style.opacity = 0;
  let nextNum = pageNum + 1;
  if (nextNum == boxAll.length) {
    nextNum = 0;
  }
  btn[nextNum].style.backgroundColor = "#fc5600";
  boxAll[nextNum].style.opacity = 1;
  pageNum = nextNum;
}, 2000);

big.onmouseenter = function () {
  clearInterval(timer);
};
big.onmouseleave = function () {
  timer = setInterval(function () {
    btn[pageNum].style.backgroundColor = "";
    boxAll[pageNum].style.opacity = 0;
    let nextNum = pageNum + 1;
    if (nextNum == boxAll.length) {
      nextNum = 0;
    }
    btn[nextNum].style.backgroundColor = "#fc5600";
    boxAll[nextNum].style.opacity = 1;
    pageNum = nextNum;
  }, 2000);
};
$(".box").click(function () {
  alert("商品已售空");
});

// 生成商品列表
//<ul class="list list_normal">
//  取出本地存储的 id 和 token
let uid = localStorage.getItem("id");
let token = localStorage.getItem("token");
let pagesize = 12;
let pagenum = 0;
laodList();
function laodList() {
  let listAPI = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
  $.get(listAPI, { pagesize, pagenum, uid }, function (listUl) {
    console.log(listUl);
    let productArr = listUl.data;
    console.log(productArr);
    let ulStr = productArr
      .map(
        (pObj) => `
            <li>
                <a href="03-item.html?id=${pObj.pid}">
                    <img src="${pObj.pimg}" alt="${pObj.pname}">
                </a>
                <div class="list-sum">
                    <strong>￥${pObj.pprice}</strong>
                </div>
                 <p>
                     <a href="#">${pObj.pname}</a>
                </p>
            </li>`
      )
      .join("");
    $(".list").html(ulStr);
  });
}
